<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>点的距离</title>
        <style>
            h3{
                text-align: center;
            }
            div{
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h3>求两点间距离</h3>
        <div>x:<input id="x1" name="x1" type="text"> y:<input id="y1" name="y1" type="text"></div>
        <div>x:<input id="x2" name="x2" type="text"> y:<input id="y2" name="y2" type="text"></div>
        <div><button onclick="fun()">计算</button></div>
        <div><textarea id = "ans" rows="10" cols="50" readonly></textarea></div>
        <script>
            class Point {
                constructor(x, y) {
                    this.x = x;
                    this.y = y;
                }
                compute(a){
                    return Math.sqrt((this.x-a.x)*(this.x-a.x)+(this.y-a.y)*(this.y-a.y));
                }
                out(a){
                    document.getElementById("ans").innerHTML="("+this.x+","+this.y+")"+"\n"+
                            "("+a.x+","+a.y+")"+"\n"+"distance:"+this.compute(a);
                }
            }
            function fun(){
                let x = document.getElementById("x1").value;
                let y = document.getElementById("y1").value;
                let p1 = new Point(x,y);
                x = document.getElementById("x2").value;
                y = document.getElementById("y2").value;
                let p2 = new Point(x,y);
                p1.out(p2);
            }
        </script>
    </body>
</html>